<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <title th:text="${title}">Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" th:href="@{/font/iconsmind-s/css/iconsminds.css}" />
    <link rel="stylesheet" th:href="@{/font/simple-line-icons/css/simple-line-icons.css}" />

    <link rel="stylesheet" th:href="@{/css/vendor/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/css/vendor/bootstrap.rtl.only.min.css}" />
    <link rel="stylesheet" th:href="@{/css/vendor/fullcalendar.min.css}" />
    <link rel="stylesheet" th:href="@{/css/vendor/dataTables.bootstrap4.min.css}" />
    <link rel="stylesheet" th:href="@{/css/vendor/datatables.responsive.bootstrap4.min.css}" />
    <link rel="stylesheet" th:href="@{/css/vendor/select2.min.css}" />
    <link rel="stylesheet" th:href="@{/css/vendor/bootstrap-float-label.min.css}" />
    <link rel="stylesheet" th:href="@{/css/vendor/select2-bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/css/vendor/bootstrap-tagsinput.css}" />
    <link rel="stylesheet" th:href="@{/css/vendor/perfect-scrollbar.css}" />
    <link rel="stylesheet" th:href="@{/css/vendor/glide.core.min.css}" />
    <link rel="stylesheet" th:href="@{/css/vendor/bootstrap-stars.css}" />
    <link rel="stylesheet" th:href="@{/css/vendor/nouislider.min.css}" />
    <link rel="stylesheet" th:href="@{/css/vendor/bootstrap-datepicker3.min.css}" />
    <link rel="stylesheet" th:href="@{/css/vendor/component-custom-switch.min.css}" />
    <link rel="stylesheet" th:href="@{/css/main.css}" />
</head>
<body>

<nav th:fragment="nav" class="navbar fixed-top">
    <div class="d-flex align-items-center navbar-left">
        <a href="#" class="menu-button d-none d-md-block">
            <svg class="main" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 17">
                <rect x="0.48" y="0.5" width="7" height="1" />
                <rect x="0.48" y="7.5" width="7" height="1" />
                <rect x="0.48" y="15.5" width="7" height="1" />
            </svg>
            <svg class="sub" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17">
                <rect x="1.56" y="0.5" width="16" height="1" />
                <rect x="1.56" y="7.5" width="16" height="1" />
                <rect x="1.56" y="15.5" width="16" height="1" />
            </svg>
        </a>

        <a href="#" class="menu-button-mobile d-xs-block d-sm-block d-md-none">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 17">
                <rect x="0.5" y="0.5" width="25" height="1" />
                <rect x="0.5" y="7.5" width="25" height="1" />
                <rect x="0.5" y="15.5" width="25" height="1" />
            </svg>
        </a>

        <div class="search" data-search-path="Pages.Search.html?q=">
            <input placeholder="Search...">
            <span class="search-icon">
                <i class="simple-icon-magnifier"></i>
            </span>
        </div>

        <a class="btn btn-sm btn-outline-primary ml-3 d-none d-md-inline-block"
           href="http://www.bootstrapmb.com/item/7621">&nbsp;BUY&nbsp;</a>
    </div>


    <a class="navbar-logo" th:href="@{/}">
        <span class="logo d-none d-xs-block"></span>
        <span class="logo-mobile d-block d-xs-none"></span>
    </a>

    <div class="navbar-right">
        <div class="header-icons d-inline-block align-middle">
            <div class="d-none d-md-inline-block align-text-bottom mr-3">
                <div class="custom-switch custom-switch-primary-inverse custom-switch-small pl-1"
                     data-toggle="tooltip" data-placement="left" title="Dark Mode">
                    <input class="custom-switch-input" id="switchDark" type="checkbox" checked>
                    <label class="custom-switch-btn" for="switchDark"></label>
                </div>
            </div>

            <!-- 主页右上角工具栏 暂时不需要 -->
            <!--<div class="position-relative d-none d-sm-inline-block">
                <button class="header-icon btn btn-empty" type="button" id="iconMenuButton" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    <i class="simple-icon-grid"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-right mt-3  position-absolute" id="iconMenuDropdown">
                    <a href="#" class="icon-menu-item">
                        <i class="iconsminds-equalizer d-block"></i>
                        <span>Settings</span>
                    </a>

                    <a href="#" class="icon-menu-item">
                        <i class="iconsminds-male-female d-block"></i>
                        <span>Users</span>
                    </a>

                    <a href="#" class="icon-menu-item">
                        <i class="iconsminds-puzzle d-block"></i>
                        <span>Components</span>
                    </a>

                    <a href="#" class="icon-menu-item">
                        <i class="iconsminds-bar-chart-4 d-block"></i>
                        <span>Profits</span>
                    </a>

                    <a href="#" class="icon-menu-item">
                        <i class="iconsminds-file d-block"></i>
                        <span>Surveys</span>
                    </a>

                    <a href="#" class="icon-menu-item">
                        <i class="iconsminds-suitcase d-block"></i>
                        <span>Tasks</span>
                    </a>

                </div>
            </div>-->
            <button class="header-icon btn btn-empty d-none d-sm-inline-block" type="button" id="fullScreenButton">
                <i class="simple-icon-size-fullscreen"></i>
                <i class="simple-icon-size-actual"></i>
            </button>

        </div>
        <!--登录状态-->
        <div th:if="${session.account ne null}" class="user d-inline-block">
            <button class="btn btn-empty p-0" type="button" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                <span class="name" th:text="${session.account.accountNickname == null ? session.account.accountEmail : session.account.accountNickname}"></span>
                <span>
                    <img alt="Profile Picture" th:src="${session.account.accountProfilePhoto}" />
                </span>
            </button>
            <div class="dropdown-menu dropdown-menu-right mt-3">
                <!--<a class="dropdown-item" href="#">Account</a>
                <a class="dropdown-item" href="#">Features</a>
                <a class="dropdown-item" href="#">History</a>
                <a class="dropdown-item" href="#">Support</a>-->
                <a class="dropdown-item" th:href="@{/user/logout}">注销</a>
            </div>
        </div>
        <!--未登录状态-->
        <div th:if="${session.account eq null}" class="user d-inline-block">
            <button class="btn btn-empty p-0" type="button" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                <span>
                    <img alt="Profile Picture" th:src="@{/img/profile-pic-l.jpg}" />
                </span>
            </button>
            <div class="dropdown-menu dropdown-menu-right mt-3">
                <a class="dropdown-item" th:href="@{/user/login}">登入</a>
                <a class="dropdown-item" th:href="@{/user/register}">注册</a>
            </div>
        </div>
    </div>
</nav>

<div th:fragment="menu(x, y)" class="menu">
        <div class="main-menu">
            <div class="scroll">
                <ul class="list-unstyled">
                    <li th:class="${x == 1 ? 'active' : ''}">
                        <a href="#blog">
                            <i class="iconsminds-shop-4"></i>
                            <span>博客</span>
                        </a>
                    </li>
                    <li th:class="${x == 2 ? 'active' : ''}">
                        <a href="#center">
                            <i class="iconsminds-digital-drawing"></i>
                            <span>个人中心</span>
                        </a>
                    </li>
                    <li th:class="${x == 3 ? 'active' : ''}">
                        <a href="#social">
                            <i class="iconsminds-air-balloon-1"></i>
                            <span>社交</span>
                        </a>
                    </li>
                    <li th:class="${x == 4 ? 'active' : ''}">
                        <a href="#tool">
                            <i class="iconsminds-pantone"></i>
                            <span>工具</span>
                        </a>
                    </li>
                    <li th:class="${x == 5 ? 'active' : ''}">
                        <a href="#disk">
                            <i class="iconsminds-three-arrow-fork"></i>
                            <span>网盘</span>
                        </a>
                    </li>
                    <!--<li>
                        <a href="Blank.Page.html">
                            <i class="iconsminds-bucket"></i> Blank Page
                        </a>
                    </li>
                    <li>
                        <a href="https://dore-jquery-docs.coloredstrategies.com" target="_blank">
                            <i class="iconsminds-library"></i> Docs
                        </a>
                    </li>-->
                </ul>
            </div>
        </div>

        <div class="sub-menu">
            <div class="scroll">
                <ul class="list-unstyled" data-link="blog">
                    <li class="active" th:class="${y == 1 ? 'active' : ''}">
                        <a th:href="@{/blog/list}">
                            <i class="simple-icon-rocket"></i> <span class="d-inline-block">博客主页</span>
                        </a>
                    </li>
                    <li th:class="${y == 2 ? 'active' : ''}">
                        <a th:href="@{/blog/myBlog}">
                            <i class="simple-icon-doc"></i> <span class="d-inline-block">我的博客</span>
                        </a>
                    </li>
                    <li th:class="${y == 3 ? 'active' : ''}">
                        <a th:href="@{/blog/publications}">
                            <i class="simple-icon-pie-chart"></i> <span class="d-inline-block">发表文章</span>
                        </a>
                    </li>
                    <!--<li th:class="${y == 4 ? 'active' : ''}">
                        <a href="Dashboard.Ecommerce.html">
                            <i class="simple-icon-basket-loaded"></i> <span class="d-inline-block">文章修改</span>
                        </a>
                    </li>-->

                </ul>
                <ul class="list-unstyled" data-link="center" id="layouts">

                    <li th:class="${y == 4 ? 'active' : ''}">
                        <a th:href="@{/user/info}">
                            <i class="simple-icon-user-following"></i> <span
                                class="d-inline-block">个人信息</span>
                        </a>
                    </li>
                    <li th:class="${y == 5 ? 'active' : ''}">
                        <a th:href="@{/user/pictureUpload}">
                            <i class="simple-icon-user-follow"></i> <span
                                class="d-inline-block">头像上传</span>
                        </a>
                    </li>
                    <li th:class="${y == 3 ? 'active' : ''}">
                        <a th:href="@{/user/changePassword}">
                            <i class="simple-icon-user-unfollow"></i>
                            <span class="d-inline-block">修改密码</span>
                        </a>
                    </li>

                </ul>

                <ul class="list-unstyled" data-link="social">
                    <li>
                        <a href="Apps.MediaLibrary.html">
                            <i class="simple-icon-picture"></i> <span class="d-inline-block">Library</span>
                        </a>
                    </li>
                    <li>
                        <a href="Apps.Todo.List.html">
                            <i class="simple-icon-check"></i> <span class="d-inline-block">Todo</span>
                        </a>
                    </li>
                    <li>
                        <a href="Apps.Survey.List.html">
                            <i class="simple-icon-calculator"></i> <span class="d-inline-block">Survey</span>
                        </a>
                    </li>
                    <li>
                        <a href="Apps.Chat.html">
                            <i class="simple-icon-bubbles"></i> <span class="d-inline-block">Chat</span>
                        </a>
                    </li>
                </ul>
                <ul class="list-unstyled" data-link="tool">
                    <li>
                        <a href="#" data-toggle="collapse" data-target="#collapseForms" aria-expanded="true"
                           aria-controls="collapseForms" class="rotate-arrow-icon opacity-50">
                            <i class="simple-icon-arrow-down"></i> <span class="d-inline-block">Forms</span>
                        </a>
                        <div id="collapseForms" class="collapse show">
                            <ul class="list-unstyled inner-level-menu">
                                <li>
                                    <a href="Ui.Forms.Components.html">
                                        <i class="simple-icon-event"></i> <span class="d-inline-block">Components</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Forms.Layouts.html">
                                        <i class="simple-icon-doc"></i> <span class="d-inline-block">Layouts</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Forms.Validation.html">
                                        <i class="simple-icon-check"></i> <span class="d-inline-block">Validation</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Forms.Wizard.html">
                                        <i class="simple-icon-magic-wand"></i> <span
                                            class="d-inline-block">Wizard</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" data-toggle="collapse" data-target="#collapseDataTables" aria-expanded="true"
                           aria-controls="collapseDataTables" class="rotate-arrow-icon opacity-50">
                            <i class="simple-icon-arrow-down"></i> <span class="d-inline-block">Datatables</span>
                        </a>
                        <div id="collapseDataTables" class="collapse show">
                            <ul class="list-unstyled inner-level-menu">
                                <li>
                                    <a href="Ui.Datatables.Rows.html">
                                        <i class="simple-icon-screen-desktop"></i> <span class="d-inline-block">Full
                                            Page UI</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Datatables.Scroll.html">
                                        <i class="simple-icon-mouse"></i> <span class="d-inline-block">Scrollable</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Datatables.Pagination.html">
                                        <i class="simple-icon-notebook"></i> <span
                                            class="d-inline-block">Pagination</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Datatables.Default.html">
                                        <i class="simple-icon-grid"></i> <span class="d-inline-block">Default</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" data-toggle="collapse" data-target="#collapseComponents" aria-expanded="true"
                           aria-controls="collapseComponents" class="rotate-arrow-icon opacity-50">
                            <i class="simple-icon-arrow-down"></i> <span class="d-inline-block">Components</span>
                        </a>
                        <div id="collapseComponents" class="collapse show">
                            <ul class="list-unstyled inner-level-menu">
                                <li>
                                    <a href="Ui.Components.Alerts.html">
                                        <i class="simple-icon-bell"></i> <span class="d-inline-block">Alerts</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Components.Badges.html">
                                        <i class="simple-icon-badge"></i> <span class="d-inline-block">Badges</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Components.Buttons.html">
                                        <i class="simple-icon-control-play"></i> <span
                                            class="d-inline-block">Buttons</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Components.Cards.html">
                                        <i class="simple-icon-layers"></i> <span class="d-inline-block">Cards</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="Ui.Components.Carousel.html">
                                        <i class="simple-icon-picture"></i> <span class="d-inline-block">Carousel</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Components.Charts.html">
                                        <i class="simple-icon-chart"></i> <span class="d-inline-block">Charts</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Components.Collapse.html">
                                        <i class="simple-icon-arrow-up"></i> <span
                                            class="d-inline-block">Collapse</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Components.Dropdowns.html">
                                        <i class="simple-icon-arrow-down"></i> <span
                                            class="d-inline-block">Dropdowns</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Components.Editors.html">
                                        <i class="simple-icon-book-open"></i> <span
                                            class="d-inline-block">Editors</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Components.Icons.html">
                                        <i class="simple-icon-star"></i> <span class="d-inline-block">Icons</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Components.InputGroups.html">
                                        <i class="simple-icon-note"></i> <span class="d-inline-block">Input
                                            Groups</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Components.Jumbotron.html">
                                        <i class="simple-icon-screen-desktop"></i> <span
                                            class="d-inline-block">Jumbotron</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Components.Modal.html">
                                        <i class="simple-icon-docs"></i> <span class="d-inline-block">Modal</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Components.Navigation.html">
                                        <i class="simple-icon-cursor"></i> <span
                                            class="d-inline-block">Navigation</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="Ui.Components.PopoverandTooltip.html">
                                        <i class="simple-icon-pin"></i> <span class="d-inline-block">Popover &
                                            Tooltip</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Components.Sortable.html">
                                        <i class="simple-icon-shuffle"></i> <span class="d-inline-block">Sortable</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Ui.Components.Tables.html">
                                        <i class="simple-icon-grid"></i> <span class="d-inline-block">Tables</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                </ul>

                <ul class="list-unstyled" data-link="disk" id="menuTypes">
                    <li>
                        <a href="#" data-toggle="collapse" data-target="#collapseMenuTypes" aria-expanded="true"
                           aria-controls="collapseMenuTypes" class="rotate-arrow-icon">
                            <i class="simple-icon-arrow-down"></i> <span class="d-inline-block">Menu Types</span>
                        </a>
                        <div id="collapseMenuTypes" class="collapse show" data-parent="#menuTypes">
                            <ul class="list-unstyled inner-level-menu">
                                <li>
                                    <a href="Menu.Default.html">
                                        <i class="simple-icon-control-pause"></i> <span
                                            class="d-inline-block">Default</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Menu.Subhidden.html">
                                        <i class="simple-icon-arrow-left mi-subhidden"></i> <span
                                            class="d-inline-block">Subhidden</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Menu.Hidden.html">
                                        <i class="simple-icon-control-start mi-hidden"></i> <span
                                            class="d-inline-block">Hidden</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="Menu.Mainhidden.html">
                                        <i class="simple-icon-control-rewind mi-hidden"></i> <span
                                            class="d-inline-block">Mainhidden</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" data-toggle="collapse" data-target="#collapseMenuLevel" aria-expanded="true"
                           aria-controls="collapseMenuLevel" class="rotate-arrow-icon collapsed">
                            <i class="simple-icon-arrow-down"></i> <span class="d-inline-block">Menu Levels</span>
                        </a>
                        <div id="collapseMenuLevel" class="collapse" data-parent="#menuTypes">
                            <ul class="list-unstyled inner-level-menu">
                                <li>
                                    <a href="#">
                                        <i class="simple-icon-layers"></i> <span class="d-inline-block">Sub
                                            Level</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" data-toggle="collapse" data-target="#collapseMenuLevel2"
                                       aria-expanded="true" aria-controls="collapseMenuLevel2"
                                       class="rotate-arrow-icon collapsed">
                                        <i class="simple-icon-arrow-down"></i> <span class="d-inline-block">Another
                                            Level</span>
                                    </a>
                                    <div id="collapseMenuLevel2" class="collapse">
                                        <ul class="list-unstyled inner-level-menu">
                                            <li>
                                                <a href="#">
                                                    <i class="simple-icon-layers"></i> <span class="d-inline-block">Sub
                                                        Level</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" data-toggle="collapse" data-target="#collapseMenuDetached" aria-expanded="true"
                           aria-controls="collapseMenuDetached" class="rotate-arrow-icon collapsed">
                            <i class="simple-icon-arrow-down"></i> <span class="d-inline-block">Detached</span>
                        </a>
                        <div id="collapseMenuDetached" class="collapse">
                            <ul class="list-unstyled inner-level-menu">
                                <li>
                                    <a href="#">
                                        <i class="simple-icon-layers"></i> <span class="d-inline-block">Sub
                                            Level</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>

            </div>
        </div>
    </div>

<footer th:fragment="footer" class="page-footer">
    <div class="footer-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-sm-6">
                    <p class="mb-0 text-muted">ColoredStrategies 2019</p>
                </div>
                <div class="col-sm-6 d-none d-sm-block">
                    <ul class="breadcrumb pt-0 pr-0 float-right">
                        <li class="breadcrumb-item mb-0">
                            <a href="#" class="btn-link">Review</a>
                        </li>
                        <li class="breadcrumb-item mb-0">
                            <a href="#" class="btn-link">Purchase</a>
                        </li>
                        <li class="breadcrumb-item mb-0">
                            <a href="#" class="btn-link">Docs</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>

<th:block th:fragment="script">
    <script th:src="@{/js/vendor/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/js/vendor/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/vendor/Chart.bundle.min.js}"></script>
    <script th:src="@{/js/vendor/chartjs-plugin-datalabels.js}"></script>
    <script th:src="@{/js/vendor/moment.min.js}"></script>
    <script th:src="@{/js/vendor/fullcalendar.min.js}"></script>
    <script th:src="@{/js/vendor/datatables.min.js}"></script>
    <script th:src="@{/js/vendor/perfect-scrollbar.min.js}"></script>
    <script th:src="@{/js/vendor/progressbar.min.js}"></script>
    <script th:src="@{/js/vendor/jquery.barrating.min.js}"></script>
    <script th:src="@{/js/vendor/select2.full.js}"></script>
    <script th:src="@{/js/vendor/nouislider.min.js}"></script>
    <script th:src="@{/js/vendor/bootstrap-datepicker.js}"></script>
    <script th:src="@{/js/vendor/Sortable.js}"></script>
    <script th:src="@{/js/vendor/mousetrap.min.js}"></script>
    <script th:src="@{/js/vendor/glide.min.js}"></script>
    <script th:src="@{/js/dore.script.js}"></script>
    <script th:src="@{/js/scripts.js}"></script>
    <script th:src="@{/js/vendor/bootstrap-notify.min.js}"></script>
    <script th:src="@{/js/my.scripts.js}"></script>
</th:block>
</body>
</html>